<template>
  <div class="leaderboard">
  	<h1>榜单</h1>
    <h3 class="fixed">
    	<router-link to="total" activeClass="current" exact>总榜</router-link>
    	<router-link to="Cutting" activeClass="current" exact>新锐</router-link>
    </h3>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'Leaderboard',
  data () {
    return {
      
    }
  },
  mounted(){
      $("section").scroll(function(){
        if($(this).scrollTop() > 90){
          $(".fixed").css({position:"fixed",top:0})
        }else{
          $(".fixed").css({position:"relative"})
        }
      })
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.leaderboard{
	flex: 1;
	width: 100%;	
}
h1{
	height: 44px;
    line-height: 44px;
    background-color: #07b3ef;
    color: #fff;
    text-align: center;
    font-size: 20px;
}
h3{
	height: 44px;
	background: #fff;
	width: 100%;
}
h3 a{
	display: inline-block;
	width: 1rem;
	text-align: center;
	line-height: 40px;
	border-bottom:4px solid #fff;
	margin-left: 0.4rem; 
}
.current{
	color:#07b3ef;
	border-bottom-color:#07b3ef;
}

</style>
